<template>
	<view style="height: 100%;">
		<!-- 遮罩层 -->
		<view @click="handleClose()"  class="mask pay-actionsheet-mask pay-mask-show"></view>
		<!-- 组件内容 -->
		<view class="bg-light fixed-bottom pay-actionsheet rounded-top-lg pay-actionsheet-show">
			<view class="w-100 flex justify-center align-center" style="position: relative; height: 100rpx;">
				<text class="font-lg">修改收获地址</text>
				<uni-icons @click="handleClose()" style="position: absolute; right: 20rpx;" type="closeempty" size="25"></uni-icons>
			</view>
			<scroll-view scroll-y="true" class="w-100" style="height: calc(100% - 240rpx);">
				<view class="pb-3">
					<view class="bg-white mx-3 mb-4 px-2 py-3 rounded-lg" v-for="(item, index) in SalesOrder" :key="index">
						<view class="rounded-lg">
							<view class="flex align-center">
								<image :src="Domain_ICON + '/position.png'" class="rounded-circle bg-info"
									style="width: 30rpx; height: 30rpx" mode=""></image>
								<text class="font ml-1">{{item.AddressData.Name}}</text>
								<text class="font ml-1">{{item.AddressData.Phone}}</text>
							</view>
							<view class="pl-4">
								<text class="font-sm">配送地址：{{item.AddressData.Address}}</text>
							</view>
						</view>
						<view v-for="(item1,index1) in item.GoodsData" :key="index1" class="flex mt-3" style="position: relative">
							<image class="rounded-lg flex-shrink" style="width: 150rpx; height: 150rpx"
								:src="Domain_IMG + item1.Picture_URL" mode=""></image>
							<view class="ml-2 pr-10 text-ellipsis" style="width: 100%; position: relative">
								<text class="font">{{ item1.Article_Name }}</text><br/>
								<text class="font-sm text-muted">规格:{{ item1.Specifications_Name }}</text>
								<text class="font-sm"
									style="position: absolute; bottom: 0; left: 0">￥{{ item1.Sales_Unit_Price }}</text>
							</view>
							<text class="font-sm" style="position: absolute; right: 0;height: 100%;line-height: 150rpx;">×{{ item1.quantity }}</text>
							<text @click="change('open',item.AddressData,item1,index,index1)" class="rounded-circle border border-secondary px-3 py-1 font-sm text-secondary" style="position: absolute; right: 0; bottom: 0;">修改地址</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="px-3 py-2 fixed-bottom bg-white" style="height: 100rpx;">
				<view class="bg-info rounded text-center py-3 text-white font-weight-bold font" @click="submit()"
					hover-class="bg-hover-info" :hover-stay-time="150">继续下单</view>
			</view>
		</view>
		<showAddressDetail v-if="isShow" :SalesOrderEdit="SalesOrderEdit" :AddressData="AddressData" @Close="change('close')" @submit="callback()"></showAddressDetail>
	</view>
</template>

<script>
	const app = getApp()
	import { NowTime } from '@/static/js/DateUtil.js'
	import showAddressDetail from '@/components/address/addressdetail.vue'
	export default {
		components: {
			showAddressDetail
		},
		data() {
			return {
				loading: false ,//节流
				Domain_ICON: app.globalData.Domain_ICON, //全局变量域名
				Domain_IMG:app.globalData.Domain_IMG,//图片路径
				isShow:false,//打开明细
				SalesOrder:[],//预修改订单
				SalesOrderEdit:{},//待分配的商品明细
				AddressData:{},//选中的商品原地址
				indexArr:[],//选中的信息索引
			}
		},
		props: {
			SalesOrder1:{//预修改订单
				type:Array,
				default: []
			}
		},
		methods: {
			handleClose() { //关闭
				this.$emit('Close');
			},
			change(type,item,item1,index,index1) {
				if(type=='open'){
					this.isShow = true
					this.SalesOrderEdit = item1
					this.AddressData = item
					this.indexArr = [index,index1];
				}else if(type=='close'){
					this.isShow = false
				}
			},
			callback(arr){//分配完成回调
				this.isShow = false//关闭
				let index = this.indexArr[0];
				let index1 = this.indexArr[1];
				//清理修改过的,重新添加
				this.SalesOrder[index].GoodsData.splice(index1, 1);
				arr.forEach(item=>{
					//判断是否存在该地址的
					if(this.SalesOrder.some(i=>i.AddressData.Address_SerialNumber==item.AddressData.Address_SerialNumber)){//存在
						//获取对应地址的数据
						this.SalesOrder.forEach(i=>{
							if(i.AddressData.Address_SerialNumber==item.AddressData.Address_SerialNumber){
								i.GoodsData = [...i.GoodsData,...item.GoodsData]
							}
						})
					}else{//不存在
						//添加新的地址的数据
						this.SalesOrder.push({
							AddressData:item.AddressData,
							GoodsData:[...item.GoodsData]
						})
					}
				})
				//清理掉没有商品的地址
				this.SalesOrder = this.SalesOrder.filter(item=>item.GoodsData.length!=0);
			},
			submit(){//提交
				this.$emit('submit',this.SalesOrder);
			}
		},
		mounted(){//获取数据
			this.SalesOrder = this.SalesOrder1
		}
	}
</script>

<style lang="scss">
	.pay-actionsheet {
		width: 100%;
		height: 75%;
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
	}

	.pay-actionsheet-show {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.pay-actionsheet-mask {
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.pay-mask-show {
		opacity: 1;
		visibility: visible;
	}
	
	.rounded-top-lg {
	  border-top-left-radius: 25rpx;
	  border-top-right-radius: 25rpx;
	}
</style>